<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				border: 1px solid red;
			}
		</style>
		<script type="text/javascript">
			function dragstart(event){
				console.log("拖动元素了");
				event.dataTransfer.setData("text",event.target.id);
			}
			function dragover(event){
				console.log("移动到div上面");
				event.preventDefault();
			}
			function drop(event){
				console.log("放手了");
				var data = event.dataTransfer.getData("text");
				event.target.appendChild(document.getElementById(data));
			}
		</script>
		
	</head>
	<body>
		<p draggable="true" id="myp" ondragstart="dragstart(event)">就是要拖动的文字</p>
		<div ondragover="dragover(event)" ondrop="drop(event)"> 
		
		</div>
	</body>
</html>
<!--
	拖动元素的写法与步骤--实现拖动元素A，放到B中
	1.首先要拖动的元素应该是可以拖动的，即draggable="true"
	2.拖动元素应该是ondragstart="自定义的拖动函数dragstart(event)"
	3.实现这个拖动函数，主要就是这个函数应该要获取到要拖动函数的id，获取方式应该是
	    event.dataTransfer.setData("数据类型 Text"，"拖动数据的id --event.traget.id");
	4.拖动的时候，经过要放得位置B的时候，执行一个函数
	     ondragover="自定义经过函数dragover(event)"，这个函数主要是清除掉后面我们释放函数的时候
	     遇到的浏览器自带的效果，所以主要是要在这里清除掉自带的效果--event.preventDefault()
	5.释放A元素的时候，ondrop()函数会被执行---应该要给B，我们拖动的元素A的id
	   获取拖动的Ａ的id--event.dataTransfer.getData("Text")，为了简洁，将之赋给data变量;
	   将指定id的数据作为儿子加到Ｂ中－－
	   event.target.appendChild(docunment.getElementById(data))
	   
	   
    依次做下来，就能实现拖动了。后面要是有新的元素也要拖动到某位置，首先检查可拖动，
    然后要有ondragstart=""
    注意：要记得加id！因为后面要获取id，必须要有id才能相互唯一确定啊；                                       
	
	
	
	
-->